<template>
  <div>
    <el-form :model="formData" inline style="display: flex;justify-content: flex-end;margin-top: 10px;">

      <el-form-item prop="key">
        <el-input v-model="formData.key" placeholder="请输入key"></el-input>
      </el-form-item>

      <el-form-item prop="name">
        <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="search" type="primary">查找</el-button>
        <el-button @click="add" type="primary">添加</el-button>
      </el-form-item>

    </el-form>

    <el-table :data="tableData" border>
      <el-table-column align="center" label="对象KEY" prop="key"></el-table-column>
      <el-table-column align="center" label="对象名称" prop="name"></el-table-column>
      <el-table-column align="center" label="对象类型" prop="type"></el-table-column>
      <el-table-column align="center" label="对象大小" prop="size"></el-table-column>
      <el-table-column align="center" label="图片" prop="url"></el-table-column>
      <el-table-column align="center" label="图片链接" prop="url"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

     <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="500">
       <el-form ref="dialogForm"  :model="dialogFormData">
         <el-form-item prop='url'>
          <el-upload
            class="avatar-uploader"
            action='http://192.168.200.251:8888/admin/storage/create'
            :show-file-list="false"
            :on-success="iconUrlSuccess"
            :headers="{'Shopping-Admin-Token': token}">
            <img v-if="dialogFormData.url" :src="dialogFormData.url" style="width: 100px;">
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="width:100px;height: 100px;border-radius: 10px;border: 2px dashed #ddd;line-height: 100px;"
            >
            </i>
          </el-upload>
        </el-form-item>
       </el-form>
      </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'objectStockpile',
  componentTitle: '对象储存',
  data () {
    return {
      dialogVisible:false,
      dialogTitle:'上传对象',     
      pageInfo: {
        page: 1,
        limit: 20,
        total: 0
      },
      formData:{
        key:'',
        name:""
      },
      tableData:[],
      dialogFormData:{
        url:''
      }
    }
  },
  mounted(){
     this.search()
  },
  methods:{
    search(){
      axios({
        url: 'http://192.168.200.251:8888/admin/storage/list',
        method: 'get',
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
          ...this.formData
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        this.tableData = res.data.data.list
        this.pageInfo.total = res.data.data.total
        console.log(res)
      })
    },
    deleteData(row){
      this.$confirm('此操作将删除该问题, 是否继续?').then(() => {
        axios({
          url: 'http://192.168.200.251:8888/admin/storage/delete',
          method: 'post',
          data: row,
          headers: {
            'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
          }
        }).then(res => {
          this.$notify.success({title: '删除成功'})
          this.search()
        })
      })
    },
    add(){
     this.dialogVisible=true
      axios({
        url: 'http://192.168.200.251:8888/admin/storage/create',
        method: 'post',
        data: {
          ...dialogFormData
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        if (res.data.errno === 0) {
          this.$notify.success({title: '添加成功'})
          this.dialogVisible=false
          this.search()
        } else {
          this.$notify.error({title: '添加失败'})
          this.dialogVisible=false
        }
      })
    },
    iconUrlSuccess (res, file) {
      console.log(res)
      this.dialogFormData.url= res.data.url.replace(/localhost:8888/g, '192.168.200.251:8888')
      // this.dialogFormData.iconUrl = res.data.url.replace(/localhost:8888/g, '192.168.200.251:8888')
      console.log(this.dialogFormData)
    },
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.search()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value

      this.search()
    }
  }
}
</script>

